<script setup lang="ts">
import { ref, onMounted, reactive, computed, watch } from 'vue'
import { getClassnameListService, getClassnameByIdService } from '@/api/education/classname'
import { getClassListByUserIdService } from '@/api/user_classname'
import { getScoreTotalService } from '@/api/education/scoreTotal'
import { getScoreStatsListService } from '@/api/education/scoreStats'
import { getUserByUserInfoService } from '@/api/user'
import { getSubjectListService } from '@/api/education/subject'
import { TClass } from '@/Types/education'
import { TSubject } from '@/Types/subject'
import GroupBarEchart from '@/components/Echart/groupBarEchart.vue'
import { useUserStore } from '@/stores'

// 接口定义
interface ScoreTotal {
	userId: number
	academyYear: string
	classId: string
	theoryTotal: number
	practiceTotal: number
	updateTime: string
}

interface ScoreStats {
	academyYear: string
	classId: string
	subjectId: number
	excellentRateTheory: number
	passRateTheory: number
	avgScoreTheory: number
	maxScoreTheory: number
	updateTimeTheory: string
	excellentRatePractice: number
	passRatePractice: number
	avgScorePractice: number
	maxScorePractice: number
	updateTimePractice: string
	theoryTotalViolations: number
	theoryTotalAbsences: number
	theoryViolationStudentIds: string
	topTheoryStudentIds: string
	practiceTotalViolations: number
	practiceTotalAbsences: number
	practiceViolationStudentIds: string
	topPracticeStudentIds: string
}

interface UserInfo {
	id: number
	username: string
	uname: string
	typeNumber?: string // 学号
}

interface ClassInfo {
	id: number
	college: string
	major: string
	grade: string
	className: string
	fullName?: string
}

// 当前学年
const currentAcademyYear = ref('2023-2024')

// 页面加载状态
const pageLoading = ref(true)

// 加载状态
const loading = reactive({
	stats: false,
	topStudents: false,
	violations: false
})

// 筛选条件
const filters = reactive({
	classId: ''
})

// 筛选选项
const filterOptions = reactive({
	classes: [] as ClassInfo[],
	subjects: [] as { id: string | number; subject: string }[]
})

// 用户信息缓存
const userInfoCache = reactive<Record<number, UserInfo>>({})

// 数据统计
const statsData = ref<ScoreStats[]>([])

// 展示类型 (理论/实践)
const scoreType = ref<'theory' | 'practice'>('theory')

// 顶尖学生数据
const topStudents = ref<any[]>([])

// 违规学生数据
const violationStudents = ref<any[]>([])

// 添加班级缓存
const classInfoCache = reactive<Record<number, any>>({})

// 初始化筛选选项
const initFilterOptions = async () => {
	try {
		const userStore = useUserStore()
		const classIdList = userStore.userInfo.userInfo.classIdList

		// 获取班级列表
		if (classIdList && classIdList.length > 0) {
			// 并行获取所有班级信息
			const classPromises = classIdList.map((id: number) => getClassnameByIdService(id))
			const classResults = await Promise.all(classPromises)

			// 合并班级数据
			let classesData: TClass[] = []
			for (const result of classResults) {
				if (result.data.code === 1 && result.data.data) {
					classesData = classesData.concat(result.data.data)
				}
			}

			// 处理班级数据，使其符合ClassInfo接口
			filterOptions.classes = classesData.map((item: TClass) => ({
				id: Number(item.classId || 0),
				college: item.academy || '',
				major: item.major || '',
				grade: String(item.grade || ''),
				className: String(item.classname || ''),
				fullName: `${item.grade}级${item.academy}${item.major}${item.classname}班`
			}))
		} else {
			const res = await getClassnameListService()
			if (res.data.code === 1 && res.data.data) {
				filterOptions.classes = res.data.data.map((item: TClass) => ({
					id: Number(item.classId || 0),
					college: item.academy || '',
					major: item.major || '',
					grade: String(item.grade || ''),
					className: String(item.classname || ''),
					fullName: `${item.grade}级${item.academy}${item.major}${item.classname}班`
				}))
			}
		}

		// 并行获取科目列表
		const res2 = await getSubjectListService()
		if (res2.data.code === 1) {
			filterOptions.subjects = res2.data.data.map((item: TSubject) => ({
				id: Number(item.id),
				subject: `${item.subject}`
			}))
		}
	} catch (error) {
		console.error('初始化筛选选项失败:', error)
	}
}

// 获取用户信息
const fetchUserInfo = async (userId: number): Promise<any | null> => {
	if (userInfoCache[userId]) {
		return userInfoCache[userId]
	}

	try {
		const res = await getUserByUserInfoService({ userId })
		if (res.data.code === 1 && res.data.data) {
			userInfoCache[userId] = res.data.data[0]
			return res.data.data[0]
		}
	} catch (error) {
		console.error(`获取用户 ${userId} 信息失败:`, error)
	}

	return null
}

// 获取班级信息函数
const fetchClassInfo = async (userId: number): Promise<any | null> => {
	if (classInfoCache[userId]) {
		return classInfoCache[userId]
	}

	try {
		// 第一步：通过用户ID获取班级ID列表
		const classListRes = await getClassListByUserIdService(userId)

		if (
			classListRes.data.code === 1 &&
			classListRes.data.data &&
			classListRes.data.data.length > 0
		) {
			// 获取第一个班级ID（通常学生只属于一个班级）
			const classId = classListRes.data.data[0].classId

			// 第二步：通过班级ID获取班级详细信息
			const classInfoRes = await getClassnameByIdService(classId)

			if (classInfoRes.data.code === 1 && classInfoRes.data.data) {
				const classData = classInfoRes.data.data
				// 构建完整班级名称
				if (classData) {
					classData.fullName = `${classData.grade}级${classData.academy}${classData.major}${classData.classname}班`
				}
				classInfoCache[userId] = classData
				return classData
			}
		}
	} catch (error) {
		console.error(`获取班级信息失败 (userId: ${userId}):`, error)
	}

	return null
}

// 获取成绩统计数据
const fetchStatsData = async () => {
	loading.stats = true
	try {
		// 如果没有选择班级，不进行数据获取
		if (!filters.classId) {
			statsData.value = []
			return
		}

		const params = {
			academyYear: currentAcademyYear.value,
			classId: filters.classId
		}

		// console.log('[fetchStatsData] 请求参数:', params)

		const res = await getScoreStatsListService(params)
		// console.log('[fetchStatsData] 响应状态码:', res.data.code)

		if (res.data.code === 1 && res.data.data) {
			// console.log('[fetchStatsData] 返回数据条数:', res.data.data.length)

			statsData.value = res.data.data
			// 处理违规学生数据
			await processViolationStudents(res.data.data)
		} else {
			// console.log('[fetchStatsData] 无数据或请求失败:', res.data)
			statsData.value = []
		}
	} catch (error) {
		// console.error('[fetchStatsData] 获取统计数据失败:', error)
		statsData.value = []
	} finally {
		loading.stats = false
	}
}

// 修改处理违规学生数据函数
const processViolationStudents = async (statsDataArray: ScoreStats[]) => {
	loading.violations = true
	try {
		const violations: any[] = []

		for (const statsData of statsDataArray) {
			// 使用classId
			const classId = statsData.classId
			const subjectInfo = filterOptions.subjects.find((s) => s.id === Number(statsData.subjectId))
			const subjectName = subjectInfo ? subjectInfo.subject : `科目${statsData.subjectId}`

			// 处理理论考试违规
			if (statsData.theoryViolationStudentIds) {
				const studentIds = statsData.theoryViolationStudentIds.split(',').filter((id) => id)

				// 使用Promise.all并行处理多个学生
				const theoryPromises = studentIds.map(async (idStr) => {
					const userId = parseInt(idStr)
					const userInfo = await fetchUserInfo(userId)
					// 获取学生的班级信息
					const classInfo = await fetchClassInfo(userId)

					return {
						typeNumber: userInfo?.typeNumber || '',
						studentName: userInfo ? userInfo.uname || userInfo.username : `用户${userId}`,
						reason: `${subjectName}`,
						appendTime: statsData.updateTimeTheory.split('T')[0],
						classId: classId,
						className: classInfo ? classInfo.fullName : '未知班级'
					}
				})

				const theoryViolations = await Promise.all(theoryPromises)
				violations.push(...theoryViolations)
			}

			// 处理实践考试违规
			if (statsData.practiceViolationStudentIds) {
				const studentIds = statsData.practiceViolationStudentIds.split(',').filter((id) => id)

				// 使用Promise.all并行处理多个学生
				const practicePromises = studentIds.map(async (idStr) => {
					const userId = parseInt(idStr)
					const userInfo = await fetchUserInfo(userId)
					// 获取学生的班级信息
					const classInfo = await fetchClassInfo(userId)

					return {
						typeNumber: userInfo?.typeNumber || '',
						studentName: userInfo ? userInfo.uname || userInfo.username : `用户${userId}`,
						reason: `${subjectName}`,
						appendTime: statsData.updateTimePractice
							? statsData.updateTimePractice.split('T')[0]
							: '未知',
						classId: classId,
						className: classInfo ? classInfo.fullName : '未知班级'
					}
				})

				const practiceViolations = await Promise.all(practicePromises)
				violations.push(...practiceViolations)
			}
		}

		violationStudents.value = violations
	} catch (error) {
		console.error('处理违规学生数据失败:', error)
	} finally {
		loading.violations = false
	}
}

// 获取优秀学生数据
const fetchTopStudents = async () => {
	loading.topStudents = true
	try {
		const res = await getScoreTotalService({ academyYear: currentAcademyYear.value })
		if (res.data.code !== 1 || !res.data.data) {
			return
		}

		// 按班级分组
		const groupedByClass = res.data.data.reduce(
			(acc: Record<string, ScoreTotal[]>, item: ScoreTotal) => {
				if (!acc[item.classId]) {
					acc[item.classId] = []
				}
				acc[item.classId].push(item)
				return acc
			},
			{} as Record<string, ScoreTotal[]>
		)

		// 找出每个班级的最高分学生
		const topStudentsPromises: Promise<any>[] = []

		for (const [classId, students] of Object.entries(groupedByClass)) {
			// 按总分排序（理论+实践）
			const typedStudents = students as ScoreTotal[]
			typedStudents.sort(
				(a, b) => b.theoryTotal + b.practiceTotal - (a.theoryTotal + a.practiceTotal)
			)

			// 取第一名
			const topStudent = typedStudents[0]
			if (topStudent) {
				const promise = (async () => {
					const userInfo = await fetchUserInfo(topStudent.userId)
					const classInfo = filterOptions.classes.find((c) => c.id === Number(classId))

					return {
						userId: topStudent.userId,
						studentName: userInfo
							? userInfo.uname || userInfo.username
							: `用户${topStudent.userId}`,
						totalScore: topStudent.theoryTotal + topStudent.practiceTotal,
						theoryScore: topStudent.theoryTotal,
						practiceScore: topStudent.practiceTotal,
						className: classInfo ? classInfo.fullName : `班级${classId}`,
						major: classInfo ? classInfo.major : '未知专业',
						college: classInfo ? classInfo.college : '未知学院'
					}
				})()

				topStudentsPromises.push(promise)
			}
		}

		// 等待所有Promise完成
		const topStudentsData = await Promise.all(topStudentsPromises)

		// 按总分排序
		topStudentsData.sort((a, b) => b.totalScore - a.totalScore)
		topStudents.value = topStudentsData.slice(0, 10) // 只显示前10名
	} catch (error) {
		console.error('获取优秀学生数据失败:', error)
	} finally {
		loading.topStudents = false
	}
}

// 图表数据计算 - 理论成绩
const chartDataTheory = computed(() => {
	if (!statsData.value || statsData.value.length === 0) {
		return {
			subject: [],
			passRate: [],
			excellentRate: [],
			violationCount: [],
			title: '理论成绩统计'
		}
	}

	// 按科目去重数据以避免重复
	const subjectMap = new Map()

	// 提取科目数据，按subjectId去重
	statsData.value.forEach((data) => {
		const subjectId = Number(data.subjectId)
		if (!subjectMap.has(subjectId)) {
			const subjectInfo = filterOptions.subjects.find((s) => s.id === subjectId)
			subjectMap.set(subjectId, {
				subjectId,
				subjectName: subjectInfo ? subjectInfo.subject : `科目${subjectId}`,
				passRateTheory: parseFloat(data.passRateTheory.toFixed(1)),
				excellentRateTheory: parseFloat(data.excellentRateTheory.toFixed(1)),
				theoryViolationCount: data.theoryViolationStudentIds
					? data.theoryViolationStudentIds.split(',').filter((id) => id).length
					: 0
			})
		}
	})

	// 将Map转为数组
	const uniqueSubjects = Array.from(subjectMap.values())

	// 构建图表数据
	const result = {
		subject: uniqueSubjects.map((item) => item.subjectName),
		passRate: uniqueSubjects.map((item) => item.passRateTheory),
		excellentRate: uniqueSubjects.map((item) => item.excellentRateTheory),
		violationCount: uniqueSubjects.map((item) => item.theoryViolationCount),
		title: '理论成绩统计'
	}

	return result
})

// 图表数据计算 - 实践成绩
const chartDataPractice = computed(() => {
	if (!statsData.value || statsData.value.length === 0) {
		return {
			subject: [],
			passRate: [],
			excellentRate: [],
			violationCount: [],
			title: '实践成绩统计'
		}
	}

	// 按科目去重数据以避免重复
	const subjectMap = new Map()

	// 提取科目数据，按subjectId去重
	statsData.value.forEach((data) => {
		const subjectId = Number(data.subjectId)
		if (!subjectMap.has(subjectId)) {
			const subjectInfo = filterOptions.subjects.find((s) => s.id === subjectId)
			subjectMap.set(subjectId, {
				subjectId,
				subjectName: subjectInfo ? subjectInfo.subject : `科目${subjectId}`,
				passRatePractice: parseFloat(data.passRatePractice.toFixed(1)),
				excellentRatePractice: parseFloat(data.excellentRatePractice.toFixed(1)),
				practiceViolationCount: data.practiceViolationStudentIds
					? data.practiceViolationStudentIds.split(',').filter((id) => id).length
					: 0
			})
		}
	})

	// 将Map转为数组
	const uniqueSubjects = Array.from(subjectMap.values())

	// 构建图表数据
	const result = {
		subject: uniqueSubjects.map((item) => item.subjectName),
		passRate: uniqueSubjects.map((item) => item.passRatePractice),
		excellentRate: uniqueSubjects.map((item) => item.excellentRatePractice),
		violationCount: uniqueSubjects.map((item) => item.practiceViolationCount),
		title: '实践成绩统计'
	}

	return result
})

// 监听筛选条件变化
watch(
	filters,
	(newFilters) => {
		fetchStatsData()
	},
	{ deep: true }
)

onMounted(async () => {
	pageLoading.value = true
	try {
		await initFilterOptions()
		await fetchTopStudents()

		const userStore = useUserStore()
		// 如果用户有班级，设置为默认值
		if (userStore.userInfo?.userInfo?.classIdList?.length > 0) {
			const classId = userStore.userInfo.userInfo.classIdList[0]
			filters.classId = String(classId)
			// 获取筛选数据
			await fetchStatsData()
		} else if (filterOptions.classes.length > 0) {
			// 如果没有用户班级，但是班级列表不为空，则设置第一个班级为默认值
			filters.classId = String(filterOptions.classes[0].id)
			// 获取筛选数据
			await fetchStatsData()
		}
	} finally {
		pageLoading.value = false
	}
})
</script>

<template>
	<div class="academy-data-container" v-loading="pageLoading" element-loading-text="数据加载中...">
		<div class="header">
			<h1>{{ currentAcademyYear }} 学年</h1>
			<!-- <div style="margin-right: 10px">
				<el-radio-group v-model="scoreType" size="large">
					<el-radio-button label="theory">理论成绩</el-radio-button>
					<el-radio-button label="practice">实践成绩</el-radio-button>
				</el-radio-group>
			</div> -->
			<el-form :inline="true">
				<el-form-item label="班级">
					<el-select
						v-model="filters.classId"
						placeholder="选择班级"
						clearable
						filterable
						style="width: 300px"
					>
						<el-option
							v-for="item in filterOptions.classes"
							:key="item.id"
							:label="item.fullName"
							:value="String(item.id)"
						/>
					</el-select>
				</el-form-item>
			</el-form>
		</div>

		<!-- <div class="filters">
			<el-card shadow="hover">
				<div class="filter-form">
					<el-form :inline="true">
						<el-form-item label="班级">
							<el-select
								v-model="filters.classId"
								placeholder="选择班级"
								clearable
								filterable
								style="width: 300px"
							>
								<el-option
									v-for="item in filterOptions.classes"
									:key="item.id"
									:label="item.fullName"
									:value="String(item.id)"
								/>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</div> -->

		<div class="stats-container">
			<!-- 成绩统计图表 -->
			<el-card shadow="hover" class="chart-card">
				<template #header>
					<div class="card-header">
						<span>{{ scoreType === 'theory' ? '理论' : '实践' }}成绩统计</span>
						<el-radio-group v-model="scoreType" size="large">
							<el-radio-button label="theory">理论成绩</el-radio-button>
							<el-radio-button label="practice">实践成绩</el-radio-button>
						</el-radio-group>
					</div>
				</template>

				<div v-if="loading.stats" class="loading-container">
					<el-skeleton :rows="5" animated />
				</div>
				<el-empty v-else-if="!filters.classId" description="请选择班级" />
				<el-empty v-else-if="!statsData.length" description="暂无数据" />
				<div v-else class="chart-container">
					<!-- 理论成绩图表 -->
					<div v-if="scoreType === 'theory'" class="theory-chart">
						<GroupBarEchart
							:chart-data="{
								subject: chartDataTheory.subject,
								passRate: chartDataTheory.passRate,
								excellentRate: chartDataTheory.excellentRate,
								violationCount: chartDataTheory.violationCount,
								title: '理论成绩统计'
							}"
							height="400px"
						/>

						<!-- 理论成绩指标卡片
						<div class="stat-cards">
							<el-row :gutter="20">
								<el-col :span="8">
									<el-card shadow="hover" class="stat-card pass-rate">
										<div class="stat-value">
											{{
												chartDataTheory.passRate.length > 0
													? (
															chartDataTheory.passRate.reduce((sum, val) => sum + val, 0) /
															chartDataTheory.passRate.length
														).toFixed(1)
													: 0
											}}%
										</div>
										<div class="stat-label">平均及格率</div>
									</el-card>
								</el-col>
								<el-col :span="8">
									<el-card shadow="hover" class="stat-card excellent-rate">
										<div class="stat-value">
											{{
												chartDataTheory.excellentRate.length > 0
													? (
															chartDataTheory.excellentRate.reduce((sum, val) => sum + val, 0) /
															chartDataTheory.excellentRate.length
														).toFixed(1)
													: 0
											}}%
										</div>
										<div class="stat-label">平均优秀率</div>
									</el-card>
								</el-col>
								<el-col :span="8">
									<el-card shadow="hover" class="stat-card violation-count">
										<div class="stat-value">
											{{
												chartDataTheory.violationCount.length > 0
													? chartDataTheory.violationCount.reduce((sum, val) => sum + val, 0)
													: 0
											}}
										</div>
										<div class="stat-label">违规总人数</div>
									</el-card>
								</el-col>
							</el-row>
						</div> -->
					</div>

					<!-- 实践成绩图表 -->
					<div v-else-if="scoreType === 'practice'" class="practice-chart">
						<GroupBarEchart
							:chart-data="{
								subject: chartDataPractice.subject,
								passRate: chartDataPractice.passRate,
								excellentRate: chartDataPractice.excellentRate,
								violationCount: chartDataPractice.violationCount,
								title: '实践成绩统计'
							}"
							height="400px"
						/>

						<!-- 实践成绩指标卡片
						<div class="stat-cards">
							<el-row :gutter="20">
								<el-col :span="8">
									<el-card shadow="hover" class="stat-card pass-rate">
										<div class="stat-value">
											{{
												chartDataPractice.passRate.length > 0
													? (
															chartDataPractice.passRate.reduce((sum, val) => sum + val, 0) /
															chartDataPractice.passRate.length
														).toFixed(1)
													: 0
											}}%
										</div>
										<div class="stat-label">平均及格率</div>
									</el-card>
								</el-col>
								<el-col :span="8">
									<el-card shadow="hover" class="stat-card excellent-rate">
										<div class="stat-value">
											{{
												chartDataPractice.excellentRate.length > 0
													? (
															chartDataPractice.excellentRate.reduce((sum, val) => sum + val, 0) /
															chartDataPractice.excellentRate.length
														).toFixed(1)
													: 0
											}}%
										</div>
										<div class="stat-label">平均优秀率</div>
									</el-card>
								</el-col>
								<el-col :span="8">
									<el-card shadow="hover" class="stat-card violation-count">
										<div class="stat-value">
											{{
												chartDataPractice.violationCount.length > 0
													? chartDataPractice.violationCount.reduce((sum, val) => sum + val, 0)
													: 0
											}}
										</div>
										<div class="stat-label">违规总人数</div>
									</el-card>
								</el-col>
							</el-row>
						</div> -->
					</div>
				</div>
			</el-card>
		</div>

		<!-- 优秀学生榜单 -->
		<!-- <div class="top-students-container">
			<el-card shadow="hover">
				<template #header>
					<div class="card-header">
						<span>优秀学生榜单 - 总分TOP 10</span>
					</div>
				</template>

				<div v-if="loading.topStudents" class="loading-container">
					<el-skeleton :rows="5" animated />
				</div>
				<el-empty v-else-if="topStudents.length === 0" description="暂无数据" />
				<div v-else class="top-students-list">
					<el-table :data="topStudents" stripe style="width: 100%" :max-height="400">
						<el-table-column type="index" label="排名" width="80" />
						<el-table-column prop="studentName" label="学生姓名" />
						<el-table-column prop="className" label="班级" show-overflow-tooltip />
						<el-table-column prop="college" label="学院" width="120" />
						<el-table-column prop="totalScore" label="总分" sortable width="100">
							<template #default="scope">
								<el-tag type="success">{{ scope.row.totalScore.toFixed(1) }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="theoryScore" label="理论成绩" width="100">
							<template #default="scope">
								<span>{{ scope.row.theoryScore.toFixed(1) }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="practiceScore" label="实践成绩" width="100">
							<template #default="scope">
								<span>{{ scope.row.practiceScore.toFixed(1) }}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-card>
		</div> -->

		<!-- 违规记录 -->
		<div class="violations-container">
			<el-card shadow="hover">
				<template #header>
					<div class="card-header">
						<span>违规学生记录</span>
						<span v-if="violationStudents.length > 0"
							>(共 {{ violationStudents.length }} 条记录)</span
						>
					</div>
				</template>

				<div v-if="loading.violations" class="loading-container">
					<el-skeleton :rows="5" animated />
				</div>
				<el-empty v-else-if="!filters.classId" description="请选择班级以查看违规记录" />
				<el-empty v-else-if="violationStudents.length === 0" description="暂无违规记录" />
				<div v-else class="violations-list">
					<el-table
						:data="violationStudents"
						stripe
						:default-sort="{ prop: 'typeNumber', order: 'ascending' }"
						style="width: 100%"
						:max-height="300"
					>
						<el-table-column prop="typeNumber" sortable label="学号" width="120" />
						<el-table-column prop="studentName" label="学生姓名" width="120" />
						<el-table-column prop="className" label="班级" show-overflow-tooltip />
						<el-table-column prop="reason" sortable label="违规科目" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="danger">{{ scope.row.reason }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="appendTime" sortable label="违规时间" width="120" />
					</el-table>
				</div>
			</el-card>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.academy-data-container {
	padding: 20px;
	width: 100%;
	background-color: #f5f7fa;
	min-height: 100vh;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;

		h1 {
			font-size: 24px;
			color: #303133;
			margin: 0;
		}
	}

	.filters {
		margin-bottom: 20px;

		.filter-form {
			.el-select {
				width: 240px;
			}
		}
	}

	.stats-container {
		margin-bottom: 20px;

		.chart-card {
			height: 100%;

			.chart-container {
				position: relative;

				.stat-cards {
					margin-top: 20px;

					.stat-card {
						text-align: center;
						padding: 10px;
						border-radius: 8px;
						transition: all 0.3s;

						&:hover {
							transform: translateY(-5px);
							box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
						}

						.stat-value {
							font-size: 24px;
							font-weight: bold;
							margin-bottom: 5px;
						}

						.stat-label {
							font-size: 14px;
							color: #606266;
						}

						&.pass-rate {
							.stat-value {
								color: #409eff;
							}
						}

						&.excellent-rate {
							.stat-value {
								color: #67c23a;
							}
						}

						&.violation-count {
							.stat-value {
								color: #e06666;
							}
						}
					}
				}
			}
		}
	}

	.top-students-container,
	.violations-container {
		margin-bottom: 20px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			font-size: 16px;
			font-weight: 500;
		}
	}

	.loading-container {
		padding: 20px;
	}

	/* 全局loading样式加强 */
	:deep(.el-loading-mask) {
		background-color: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(3px);

		.el-loading-spinner {
			.circular {
				width: 50px;
				height: 50px;
			}

			.el-loading-text {
				margin-top: 10px;
				font-size: 16px;
				color: #409eff;
			}
		}
	}
}
</style>
